<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>ECharts Example</title>
    <!--<script th:src="@{/static/js/dist/echarts.js}"></script>-->
    <!--<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>-->
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/jquery.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script th:inline="javascript">

    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title: {
            text: 'ECharts Example'
        },
        tooltip: {},
        xAxis: {
            data: ["A", "B", "C", "D", "E", "F"]
        },
        yAxis: {},
        series: [{
            name: 'Sales',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    myChart.setOption(option);


    // 获取数据的函数
    function fetchData(callback) {
        // 这里使用Ajax获取数据，你可以根据实际情况使用其他方法
        $.ajax({
            url: '/mk/di/power/trade/settle/info/getData', // 数据源URL
            dataType: 'json',
            success: function (data) {
                callback(data);
            }
        });
    }

    // 更新图表数据的函数
    function updateChart(data) {
        // 更新xAxis和series的数据
        myChart.setOption({
            xAxis: {
                data: data.categories // 假设返回的数据中有categories字段
            },
            series: [{
                name: '销量',
                data: data.values // 假设返回的数据中有values字段
            }]
        });
    }

    // 异步获取数据
    fetchData(function (data) {
        // 使用获取到的数据更新图表
        console.log(data.data);
        updateChart(data.data);
    });

</script>
</body>
</html>